@import 'util';
//.
// Class.scss
// ------------------------
// 公用类库，让样式更便捷（偷懒）
// (=ˋωˊ=)
//

// 基础类
.show {
    display: block;
}

.hide {
    display: none;
}

// text
.text-bold {
    font-weight: bold;
}
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.text-nowrap {
    white-space: nowrap;
}

.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-wrap {
    white-space: normal;
}

.text-pre {
    white-space: pre;
}

.text-preLine {
    white-space: pre-line;
}

.text-preWrap {
    white-space: pre-wrap;
}

// vertical-align
.vertical-middle {
    vertical-align: middle;
}

.vertical-sub {
    vertical-align: sub;
}

.vertical-textBottom {
    vertical-align: text-bottom;
}

.vertical-textTop {
    vertical-align: text-top;
}

.vertical-bottom {
    vertical-align: bottom;
}

.vertical-top {
    vertical-align: top;
}

// display
.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.flex {
    display: flex;
}

.flex1 {
    flex: 1;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.inline-flex {
    display: inline-flex;
}

.inline-flex-column {
    display: inline-flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-center {
    align-items: center;
    justify-content: center;
}

.flex-v-center {
    align-items: center;
}

.flex-h-center {
    justify-content: center;
}

.flex-right {
    justify-content: flex-end;
}

.flex-start {
    align-items: flex-start;
}

.flex-end {
    align-items: flex-end;
}

.self-end {
    align-self: flex-end;
}

.self-center {
    align-self: center;
}

.self-start {
    align-self: flex-start;
}


// border
.circle {
    border-radius: 50%;
}

/*
 * 浮动
 */
.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.clear {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}


/*
 * 组件类
 */
.input-group {
    margin: 10px 0;
    display: block;
    >label {
        font-size: 14px;
        display: block;
        color: $masstone;
    }
}

.striped {
    li:nth-child(2n), tr:nth-child(2n) {
        background-color: #eef2f4;
    }
}
.striped-odd {
    li:nth-child(2n+1), tr:nth-child(2n+1) {
        background-color: #eef2f4;
    }
}

/*
 * 主题类
 */
@each $name, $color, $lightPercent in $colors {
	//基本主题
    .#{$name} {
        color: $color!important;
    }
    .bg-#{$name} {
        background-color: $color!important;
    }
    .theme-#{$name} {
        background-color: $color!important;
        color: $white!important;
        &:hover {
            background-color: lighten($color, 10%)!important;
        }
        &:active {
            background-color: darken($color, 10%)!important;
        }
    }
    //按钮主题
    .btn-#{$name} {
        background-color: $color;
        &:hover {
            background-color: lighten($color, 5%);
        }
        &:active {
            background-color: darken($color, 5%);
        }
    }
}

/*
 * 大小类
 */
@each $name, $percent in $percents {
    .width-#{$name} {
        width: $percent;
    }
    .height-#{$name} {
        height: $percent;
    }
}
@each $name, $num in $size {
	.width-#{$name} {
		width: $num * 50px;
	}
	.height-#{$name} {
		height: $num * 50px;
	}
    .height-middle-#{$name} {
        height: $num * 50px;
        line-height: $num * 50px;
    }
    @if ($name == xs) {
        .border-radius {
            border-radius: $num * 5px;
        }
    }
    .border-radius-#{$name} {
        border-radius: $num * 5px;
    }
    .p-#{$name} {
        padding: $num * 3px $num * 5px;
    }
    .m-#{$name} {
        margin: $num * 3px $num * 5px;
    }
    @each $location in $locations {
        .p#{str-slice($location, 0, 1)}-#{$name} {
            padding-#{$location}: $num * 5px;
        }
        .m#{str-slice($location, 0, 1)}-#{$name} {
            margin-#{$location}: $num * 5px;
        }
    }
    @each $direction in $directions {
        .p#{str-slice($direction, 0, 1)}-#{$name} {
            @if ($direction == horizontal) {
                @extend .pl-#{$name};
                @extend .pr-#{$name};
            }
            @else {
                @extend .pt-#{$name};
                @extend .pb-#{$name};
            }
        }
        .m#{str-slice($direction, 0, 1)}-#{$name} {
            @if ($direction == horizontal) {
                @extend .ml-#{$name};
                @extend .mr-#{$name};
            }
            @else {
                @extend .mt-#{$name};
                @extend .mb-#{$name};
            }
        }
    }
    .fontSize-#{$name} {
        font-size: 10px + $num * 2px;
    }
}

